<template>
  <div class=" designLists-box">
    <!-- 设计列表 -->
    <serchForm
      :Form="inventoryForm"
      :FormLabel="inventoryFormLabel"
      @onSearch="onSearch"
    />

    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      @tableDetail="tableDetail"
      @updatePhotos="updatePhotos"
    >

      <el-table-column
        label="操作"
        class-name="operate"
        :align="'center'"
        show-overflow-tooltip
      >
        <template
          #default="scope"
          v-if="checkPermi(['system:measurement:designCheck'])"
        >
          <p @click="succeed(scope.row.id)">同意</p>
          <p @click="rejected(scope.row.id)">驳回</p>
        </template>
      </el-table-column>
    </forTableCom>
    <el-dialog
      v-model="dialogVisible"
      :title="dialogFlag"
      width="500"
    >
      <div
        class="box"
        style="display: flex; flex-direction:column; justify-content: space-evenly;height: 100px;align-items: center; "
      >
        <span>{{ dialogTitle }}</span>
        <el-input
          v-model="remarks"
          style="width: 240px"
          autosize
          type="textarea"
          placeholder="请输入备注"
          v-show="dialogFlag == '驳回'"
        />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="dialogFlagFn"
            :class="dialogFlag"
          >
            {{ dialogFlag }}
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>
<script setup>
import { listMeasurement, designCheckMeasurement } from '@/api/costSum'
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { ref, onMounted, defineEmits } from 'vue';
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import { deletePopHook } from '@/hook/setPop/deletePop.js'
import { checkPermi } from "@/utils/permission.js";

const { proxy } = getCurrentInstance();
const emit = defineEmits(['goMeasurement', 'updatePhotos', 'defineSheJI'])
let updatePop = updatePopHook()
let deletePop = deletePopHook()
// 控制对话窗
let dialogVisible = ref(false)
let dialogFlag = ref('同意')
const dialogTitle = ref(`你确认要${dialogFlag.value}这个审核设计图吗？`)
let designId = ref(null)
// 弹窗
let flag = ref(false)
// 详情禁用
let disabled = ref(false)
// 勾选激活行的背景色
const idActive = 'id'
// 驳回备注
let remarks = ref('')
// 表单
let inventoryForm = ref(
  {
    id: '',      // 测量单编号
    surveyDate: '',    // 测量日期
    customerId: '',      // 客户名称
    terminalName: '',      // 终端名称
  }
)
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'id',
    label: '测量单编号'
  },
  {
    name: 'surveyDate',
    label: '测量日期',
    type: 'picker'
  },
  {
    name: 'customerId',
    label: '客户名称',
    type: 'customer'
  },
  {
    name: 'terminalName',
    label: '终端名称'
  },

])
// 查找suppliersName
const onSearch = (v) => {
  console.log(v);
  pageNum.value = 1
  getListMeasurementFn(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])


// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'id',
    label: '测量单编号',
    colorClassName: 'activeColor'
  },
  {
    prop: 'surveyDate',
    label: '测量日期',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'businessSurveyorName',
    label: '经营测量人员',
    minwidth: 120
  },

  {
    prop: 'businessSurveyorDeptName',
    label: '部门名称',
    minwidth: 100
  },
  {
    prop: 'designElements',
    label: '设计元素',
    minwidth: 100
  },
  {
    prop: 'designerName',
    label: '设计人员',
    minwidth: 100
  },
  {
    prop: 'designType',
    label: '状态'
  },
  {
    prop: 'designDrawings',
    label: '设计稿'
  },
])

// 表格数据内容
let inventoryTableData = ref([

])

// 跳转上传图片
const updatePhotos = (v) => {
  emit('updatePhotos', v)
}

// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit

  let params = inventoryForm.value
  getListMeasurementFn(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v);
}

// 修改数据页面
const updateGoodsInfo = () => {
  updatePop(multipleSelection, flag, '修改商品管理信息', disabled)
}
// 详情双击行
const tableDetail = (props) => {
  flag.value = true
  disabled.value = true
  emit('defineSheJI', props)
}


// 去测量
const goDevise = (v) => {
  emit('goDevise', v)
}

// 同意
const succeed = (id) => {
  designId.value = id
  dialogVisible.value = true
  dialogFlag.value = '同意'
}
// 驳回
const rejected = (id) => {
  designId.value = id
  dialogVisible.value = true
  dialogFlag.value = '驳回'

}
const designCheckMeasurementFn = async (designType) => {
  let params = {
    id: designId.value,
    designType: designType,
    remarks: remarks.value
  }
  let { code, msg } = await designCheckMeasurement(params)
  if (code == 200) {
    proxy.$modal.msgSuccess(msg);
    getListMeasurementFn()
  }
  dialogVisible.value = false

}
// 审核接口
const dialogFlagFn = () => {

  if (dialogFlag.value == '同意') {
    designCheckMeasurementFn('审核通过')

  } else {
    if (remarks.value) {
      designCheckMeasurementFn('驳回')
      proxy.$modal.msgWarning('请输入驳回内容');
    }
  }
}
// 接口
const listMeasurementFn = async (params) => {
  let { code, rows, total } = await listMeasurement(params)
  if (code == 200) {
    rows.map(v => {
      v.designDrawings = JSON.parse(v.designDrawings)
    })
    inventoryTableData.value = rows
    totals.value = total
  }
}

const getListMeasurementFn = (v) => {
  let paramss = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    designType: '待审核',

  }
  let params = Object.assign(paramss, v)
  listMeasurementFn(params)
}

onMounted(() => {
  getListMeasurementFn()
})
</script>
<style scoped lang='scss'>
.designLists-box {
  padding: 16px;
}
.operate{
  p{
    cursor: pointer;
    color: #1a48fe;
  }
}
</style>
